<template>
    <item class="item-icon-right" @click.native="pick">
        {{label}}
        <span class="item-note">{{text}}</span>
        <i class="icon ion-ios-arrow-right"></i>
    </item>
</template>
<script>
//picker组件，需要service/config/picker中的文件配合
//导入重置的样式文件
require('asset/scss/reset/picker.scss')
import Picker from 'better-picker'

export default {
    data() {
        return {
            picker: null,
            text: '请选择',
            firstShow: true,
            showing: false
        }
    },
    props: {
        label: String,
        list: Array,
        selectedIndex: {
            type: Array,
            required: false
        },
        level: {
            type: Number,
            required: false,
            default: 1
        },
        ifRelated: {
            type: Boolean,
            required: false,
            default: false
        },
        value: null,
        afterShow: {
            default: false
        }
    },
    methods: {
        pick() {
            this.showing = true
            var vm = this
            if (!this.picker) {
                return;
            }
            if (this.afterShow) {
                setTimeout(() => {
                    this.picker.show(function () {
                        // 解决picker不能弹出内容不正确
                        if (vm.firstShow) changeList(0, 0)
                        vm.firstShow = false
                        function changeList(index, selectedIndex) {
                            if (index > vm.level - 1) return;
                            var parent = vm.list[index];
                            vm.picker.refillColumn(index + 1, parent[selectedIndex].children)
                            changeList(index + 1, 0);
                        }
                    });
                }, 200)
            } else {
                this.picker.show(function () {
                    // 解决picker不能弹出内容不正确
                    if (vm.firstShow) changeList(0, 0)
                    vm.firstShow = false
                    function changeList(index, selectedIndex) {
                        if (index > vm.level - 1) return;
                        var parent = vm.list[index];
                        vm.picker.refillColumn(index + 1, parent[selectedIndex].children)
                        changeList(index + 1, 0);
                    }
                });
            }
        },
        // 关闭picker
        hide() {
            if (this.showing) {
                this.picker.hide()
            }
        }
    },
    computed: {
        indexs() {
            var indexs;
            if (this.selectedIndex == null) {
                indexs = [];
                for (var i = 0; i < this.level; i++) {
                    indexs[i] = 0;
                }
                return indexs;
            }
            return selectedIndex;
        }
    },
    mounted() {
        if (this.picker == null) {
            var vm = this;
            this.picker = new Picker({
                data: vm.list,
                selectedIndex: vm.indexs,
            });
            this.picker.on('picker.select', function (selectedVal, selectedIndex) {
                var text = '';
                for (var i = 0; i < vm.list.length; i++) {
                    if (i != 0) text += ' ';
                    text += vm.list[i][selectedIndex[i]].text;
                }
                vm.text = text;
                vm.$emit('input', selectedVal, text);
                vm.showing = false
            })
            this.picker.on('picker.change', function (index, selectedIndex) {
                changeList(index, selectedIndex);
            });
            this.picker.on('picker.cancel', function () {
                vm.showing = false
            })

            function changeList(index, selectedIndex) {
                if (index > vm.level - 1) return;
                var parent = vm.list[index];
                vm.picker.refillColumn(index + 1, parent[selectedIndex].children)
                changeList(index + 1, 0);
            }
        }
    }
}
</script>
<style lang="scss" scoped>

</style>